<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snap.svg基本使用</title>
    <!-- 
    Snap.svg 是一个用于操作 SVG（可缩放矢量图形）的 JavaScript 库，它提供了丰富的 API 来创建、操作和动画 SVG 图形。以下是 Snap.svg 的一些关键特性和总结：

    主要特性
    易于使用：

    Snap.svg 提供了简单易用的 API，使得开发者可以轻松地创建和操作 SVG 图形。
    支持链式调用，使代码更加简洁和易读。
    强大的动画功能：

    提供了多种动画方法，如 animate、animateAlong、animateWith 等，可以实现复杂的动画效果。
    支持路径动画，可以沿着 SVG 路径进行动画。
    事件处理：

    支持事件监听和处理，可以为 SVG 元素添加交互效果。
    支持自定义事件，方便复杂的交互逻辑。
    路径操作：

    提供了丰富的路径操作方法，如路径解析、路径转换等。
    支持路径的拼接、分割、变换等操作。
    兼容性：

    Snap.svg 兼容现代浏览器，包括 Chrome、Firefox、Safari 和 Edge。
    提供了对旧版浏览器的支持，确保项目的兼容性。
    插件支持：

    Snap.svg 可以通过插件扩展其功能，提供了丰富的社区资源和插件。
    支持自定义插件开发，可以根据项目需求进行扩展。
    -->
  </head>
  <body>
    <script src="./libs/snap.svg-min.js"></script>
    <script>
      window.onload = function () {
        const svg = Snap(300, 300); // 创建一个 300x300 的 SVG 画布

        const circle = svg.circle(150, 150, 100); // 创建一个圆心在 (150, 150)，半径为 100 的圆
        circle.attr({
          fill: "red",
          stroke: "black",
          strokeWidth: 2,
        }); // 设置圆的填充颜色、边框颜色和边框宽度

        document.body.appendChild(svg.node);
      };
    </script>
  </body>
</html>
